import styles from './official.module.scss'
import { SearchOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

const View: React.FC = () => {
  const navigate = useNavigate()

  const username = localStorage.getItem('token')

  const gotoBooking = () => navigate('/booking')

  const login = () => username ? navigate('/bookingData') : navigate('/login')

  return(
    <div>
      <div className={styles.backImg}>
        <div className={styles.top}>
          <div className={styles.left}>
            <img src="https://www.jinjianghotels.com.cn/upload/cn/images/2021-04/1617355971932.png" width={268} alt="" />
          </div>
          <div className={styles.right}>
            <div>首页</div>
            <div>品牌LAB</div>
            <div>投资加盟</div>
            <div>人才发展</div>
            <div onClick={gotoBooking}>酒店预定</div>
            <div>关于我们</div>
            <div onClick={login}>{username ? '后台管理' : '管理员登录'}</div>
            <div><SearchOutlined /></div>
          </div>
        </div>
        <div className={styles.h1}>
          <div>BETTER SLEEP , BETTER LIFE</div>
          <div>深睡眠 大健康</div>
        </div>
      </div>
    </div>
  )
}

export default View